<template>
    <div class=''>
        <div class="title">
            <img style="height: 30px; width: 30px; margin-left: 10px;" src="../../../../assets/addApp/iToDo.png">
            <span style="padding-left: 10px;">iToDo</span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs" :stretch="true">
            <el-tab-pane label="待办" name="first">
                <div class="first" ref="first" @scroll="handleScroll">
                    <div class="div_content">
                        <div class="divs" v-for="(item, idx) in iToDoList" :key="idx">
                            <div :class="classHandler(item.iu)" class="divs_type">{{ typeHandler(item.iu) }}</div>
                            <div style="padding: 5px;">
                                <div class="divs_time">{{ item.starttime }}</div>
                                <div v-show="item.project">项目：<el-tag size="mini">{{ item.project }}</el-tag></div>
                                <div v-show="labelHandler(item.label)">标签：<el-tag
                                        v-for="(item1, index) in labelFormatting(labelHandler(item.label) ? item.label : '')"
                                        :key="index" size="mini" style="margin-right: 2px;">{{ item1 }}</el-tag></div>
                                <div class="divs_time" v-show="item.hasfinish == '1'"> - {{ item.finishtime }}</div>
                                <span class="divs_title">{{ item.title }}</span>
                                <span class="divs_hasfinish"
                                    :class="{ 'blueColor': item.hasfinish == '1', 'redColor': item.hasfinish == '0' }">{{
                                        item.hasfinish
                                        == '0' ? '未完成' : '已完成' }}</span>
                                <div class="divs_detail" v-html="brHandler(item.detail)"></div>
                            </div>
                        </div>
                    </div>
                    <div v-show="showLoading">
                        <el-divider>{{ loadingText }}</el-divider>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="番茄钟" name="second">
                <div class="tomato" ref="second" @scroll="handleScroll">
                    <div class="tomato_content" v-for="(item, idx) in tomatoList" :key="idx">
                        <span>{{ item.title }}</span>
                        <span>{{ timeHandler(item.time) }}分钟</span>
                    </div>
                    <div v-show="showLoading">
                        <el-divider>{{ loadingText }}</el-divider>
                    </div>

                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { getIToDoListApi, getTomatoApi } from '@/api/addApp/iToDo_api'
import { throttle } from 'lodash';
export default {
    name: 'iToDo',
    props: ['sendData'],
    data() {
        return {
            iToDoList: [],
            tomatoList: [],
            offset: 1,
            limit: 20,
            activeName: 'first',
            list: [],
            list1: [],
            loadingText: '正在加载中...',
            showLoading: false,//控制加载文本的显示
        };
    },
    mounted() {
        this.getIToDoList()
        this.getTomatoList()
    },
    methods: {
        //判断是否滚到底部 触发条件
        handleScroll: throttle(function () {
            if (this.activeName == 'first') {
                const first = this.$refs.first;
                // 判断滚动到底部
                if (first.scrollTop + first.clientHeight + 10 + 10 >= first.scrollHeight) {

                    this.showLoading = true;
                    if (this.list.length == this.limit) {
                        this.loadingText = '正在加载. . .';
                        this.offset++;
                        this.getIToDoList();
                    } else {
                        this.loadingText = '到底了 没有更多了！';
                    }
                }
            } else {
                const second = this.$refs.second;
                // 判断滚动到底部
                if (second.scrollTop + second.clientHeight + 10 + 10 >= second.scrollHeight) {
                    this.showLoading = true;
                    if (this.list1.length == this.limit) {
                        this.loadingText = '正在加载. . .';
                        this.offset++;
                        this.getTomatoList();
                    } else {
                        this.loadingText = '到底了 没有更多了！';
                    }
                }
            }

        }),
        async getTomatoList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getTomatoApi(data);
                this.list1 = list.data;
                this.tomatoList.push(...list.data);
            } catch (error) {
                console.error(error);
            }
        },
        async getIToDoList() {
            let data = {
                proof_num: this.sendData.proof_num,
                offset: this.offset,
                limit: this.limit,
            }
            try {
                let list = await getIToDoListApi(data);
                this.list = list.data;
                this.iToDoList.push(...list.data);
            } catch (error) {
                console.error(error);
            }
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        //识别换行
        brHandler(data) {
            return data.replace(/\n/g, '<br/>');
        },
        //判断类型
        typeHandler(data) {
            if (data == '1') {
                return '重要且紧急'
            } else if (data == '2') {
                return '重要但不紧急'
            } else if (data == '3') {
                return '不重要但紧急'
            } else if (data == '4') {
                return '不重要且不紧急'
            }
        },
        //根据类型返回颜色
        classHandler(data) {
            if (data == '1') {
                return 'red'
            } else if (data == '2') {
                return 'orange'
            } else if (data == '3') {
                return 'blue'
            } else if (data == '4') {
                return 'green'
            }
        },
        //判断标签
        labelHandler(data) {
            if (data == '[]') {
                return 0
            } else if (!data) {
                return 0
            } else {
                return 1
            }
        },
        //格式化时间
        timeHandler(data) {
            return data / 60000
        },
        //格式化label
        labelFormatting(data) {
            if (data == '') {
                return []
            } else {
                // let list = []
                let listArr = []
                // data.forEach((item) => {
                //     list.push(item.split('\\'))
                // })
                JSON.parse(data).forEach(item => {
                    listArr.push(item.replace(/"/g, ''))
                })
                return listArr
            }
        }
    },
};
</script>

<style lang='scss' scoped>
.blueColor {
    color: #03a3e3;
}

.redColor {
    color: #f56c6c;
}

.red {
    background-color: #f56c6c;
}

.orange {
    background-color: #e6a23c;
}

.blue {
    background-color: #03a3e3;
}

.green {
    background-color: #67c23a;
}

.title {
    height: 50px;
    background-color: #2b2f3a;
    margin-bottom: 10px;
    font-size: 15px;
    color: #fff;
    display: flex;
    align-items: center;
}

.tabs {
    .first {
        height: 750px;
        overflow-y: auto;
        padding-bottom: 100px;

        .div_content {
            // height: 750px;
            // overflow-y: auto;
            column-count: 2;
            column-gap: 0;

            .divs {
                border: 1px solid #eee;
                border-radius: 10px;
                margin: 0px 5px 10px 5px;
                height: 100%;
                overflow: auto;

                .divs_type {
                    color: #fff;
                    width: 100%;
                    // border-radius: 20px;
                    text-align: center;
                    margin-bottom: 5px;
                }

                .divs_time {
                    color: #9d9292;
                    font-size: 12px;
                }

                .divs_title {
                    font-weight: 900;
                }

                .divs_hasfinish {
                    font-size: 9px;
                    margin-left: 3px;
                }

                .divs_detail {
                    font-size: 12px;
                    color: #665f5f;
                }
            }

            :hover {
                border-color: #03a3e3;
            }

        }

    }


    .tomato {
        height: 750px;
        overflow-y: auto;
        padding-bottom: 100px;

        .tomato_content {
            // width: 100%;
            height: 50px;
            background-image: url('../../../../assets/addApp/iToDobg.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 20px;
            margin: 10px;
            border-radius: 10px;
        }


    }

    @media screen and (min-width: 2360px) {

        .first,
        .tomato {
            height: 710px;
        }
    }

    @media screen and (min-width: 2561px) {

        .first,
        .tomato {
            height: 575px;
        }
    }

}
</style>